<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>

	<h1>查询界面</h1>
	请输入关键字：<input type="text" class="keyword">
	<button class="search">搜索</button>
	
	<table class="content">
		<tr>
				<td>选择</td>
				<td>ID号</td>
				<td>姓名</td>
				<td>密码</td>
				<td>年龄</td>
				<td>性别</td>
				<td>电话</td>
				<td>地址</td>
				<td>状态</td>
				<td>操作</td>
			</tr>	
			
	</table>

	<table style="visibility:hidden;">
		<tr><td>姓名:<input type="text" name="cname"></td></tr>
		<tr><td>密码:<input type="text" name="cpassword"></td></tr>
		<tr><td>年龄:<input type="text" name="cage"></td></tr>
		<tr><td>性别:<input type="text" name="cgender"></td></tr>
		<tr><td>电话:<input type="text" name="cphone"></td></tr>
		<tr><td>地址:<input type="text" name="caddress"></td></tr>
			
	</table>
	<button type="button" class="change" style="visibility:hidden;">修改</button>
	
	<script type="text/javascript">
	
		$(function(){
	
			var table = document.getElementsByTagName("table")[0];
			var init = table.innerHTML;
			var arr = [];//创建一个数组
			$('button.search').click(function a(){//绑定事件
				$.ajax({
					type : 'post',
					url : 'ajaxSearch.action',					
					data : {
						"keyword" :$("input.keyword")[0].value
					},
						
					contentType : "application/x-www-form-urlencoded",
						
					dataType : 'json',					
				
					success : function(data){
						console.log(init);
						table.innerHTML = init;
						console.log("请求成功");
						console.log(data);
						
						
						for(var index = 0 ;index < data.length ; index++){
							var obj = data[index];
							table.innerHTML += "<tr><td><input type='checkbox' name='deleteNums' value=" + obj.cid + "></td><td>" + obj.cid + "</td><td>" + 
							obj.cname + "</td><td>" + obj.cpassword + "</td><td>" +
							obj.cage + "</td><td>" + obj.cgender + "</td><td>" +
							obj.cphone + "</td><td>" + obj.caddress +"</td><td>" +
							obj.status+ "</td><td><span class=\"change\" value="+ obj.cid +" style =\"text-decoration:underline\" >修改</span></td></tr>"
						}
						table.innerHTML += "<tr><td><button type='button' class='batchDelete'>批量删除</button></td></tr>";
						
						$("span.change").css("cursor","pointer").hover(function(){
							$(this).css("color","red"
							)},function(){
							$(this).css("color","green"
							)}),
						
						$("span.change").click(function(){
							$("table").eq(1).css("visibility","visible");
							$("button.change").css("visibility","visible");
							/* $.ajax({
								type : "post",
								
								traditional:true,
								
								url : "select.action",
								
								dataType : "json",
								
								contentType:"application/x-www-form-urlencoded",
								data: {
									"altercid":$(this).attr('value')
								},
								success:function (data){
									$('table')[1].style.visibility="visible",
									$('input.change')[0].value=data.cname,
									$('input.change')[1].value=data.cage,
									$('input.change')[2].value=data.cgender,
									$('input.change')[3].value=data.cpassword,
									$('input.change')[4].value=data.cphone,
									$('input.change')[5].value=data.caddress
									
								},
									//回调函数，请求失败时调用的函数
								error:function(data){
									alert("修改失败")
	
								}
							}) */
						})
	
						
						$('button.batchDelete').click(function(){
							
							var inputs = document.getElementsByTagName("input");
							for(var index = 1 ;index < inputs.length ; index++){
								if(inputs[index].checked){
									arr.push(inputs[index].value);
								}
							}	
							console.log(arr);
							$.ajax({
								type : 'post',
								
							    traditional:true, //序列化数据
								
								url : 'batchDelete.action',					
								data : {
									"arr" : arr
								},
									
								contentType : "application/x-www-form-urlencoded",
									
								dataType : 'json',					
							
								success : function(data){	
									/* a(); */
									alert("删除成功");
								},
								
								error : function(data){
									console.log("请求失败");
								}
						
						
							})
						})	
		
					},
					
					error : function(data){
						console.log("请求失败");
					}
			
			
				})
			})	
			
			
		})
	</script>
</body>
</html>